import { StyleSheet, View } from 'react-native';
import * as React from 'react';
import CourseCategory from './CourseCategory';

const courseCategories = [
  { name: '热身', image: require('../../assets/images/category-1.png') },
  { name: '减脂', image: require('../../assets/images/category-2.png') },
  { name: '增肌', image: require('../../assets/images/category-3.png') },
  { name: '瑜伽', image: require('../../assets/images/category-4.png') },
  { name: '体态', image: require('../../assets/images/category-5.png') },
  { name: '更多', image: require('../../assets/images/category-6.png') },
];

export default function CourseCategoryCollection() {
  return (
    <View style={styles.container}>
      {courseCategories.map(it => (
        <CourseCategory
          key={it.name}
          name={it.name}
          image={it.image}
          style={styles.courseCategory}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingHorizontal: 6,
  },
  courseCategory: {
    width: '50%',
    marginTop: 12,
  },
});
